<template>
	<div id='coupon' @click='changeCoupon'>
		<span style='font-weight:600;'>优惠劵</span>
		<span v-if='money!="0.00"' class='money'>
			已选：&nbsp;-￥
			<span>{{money}}</span>
		</span>
		<span v-else class='money'>
			暂无可用
		</span>
		<span class='fa fa-angle-right icon-right'></span>
	</div>
</template>

<script>
	export default {
		props:['money'],
		methods:{
			changeCoupon(){
				this.$emit('changeCoupon');
			}
		}
	}
</script>

<style scoped>
	#coupon{
		position: relative;
		height:5rem;
		background: white;
		text-indent:1rem;
		line-height: 5rem;
		border-bottom: 1px solid #efefef;
	}
	.money{
		position: absolute;
		right: 35px;
		font-size:12px;
		color:#9d9d9d;
	}
	.icon-right{
		position: absolute;
		top:1.5rem;
		right: 1rem;
		font-size:2rem;
		color:#999;
	}
</style>